export const detail = {
  header: `
# Icon

> 此组件由一个span标签包裹，svg显示图标；使用单个图标会挂载所有图标在页面上，所以图标库只包含部分常用的图标进行开发。
`,
  codeExample: [
    {
      title: '### 图标总览',
      code: `
import React from 'react';
import Icon from '../../components/Icon'

class App extends React.Component<any, any> {

      // constructor...
      // componentDidMount....
      
      render() {
         return (
            <div className="page_icon" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <ul className="wrapper">
                  <li>
                     <Icon type="loading"/>
                  </li>
                  <li>
                     <Icon type="close"/>
                  </li>
                  <li>
                     <Icon type="failed"/>
                  </li>
                  <li>
                     <Icon type="search"/>
                  </li>
                  <li>
                     <Icon type="success"/>
                  </li>
               </ul>
            </div>
         );
      }
}

export default App;`
    }, {
      title: '### 特殊图标——loading',
      code: `
import React from 'react';
import Icon from '../../components/Icon'

   class App extends React.Component<any, any> {

         constructor(props) {
            super(props)

            this.state = {
               showHideTrigger: false
            }
         }

         componentDidMount() {
            setTimeout(() => {
               this.setState({
                  state1: 'failed'
                  state2: 'success'
               })
            }, 1500)
         }
         
         render() {
            return (
               <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
                  <div className="list_item">
                     <Icon 
                        type="loading"
                        state={this.state.state1}
                        style={{
                           width: '.22rem',
                           height: '.22rem'
                        }}
                        onClick={() => alert('点击成功')}
                     />
                     <Icon 
                           type="loading"
                           state={this.state.state2}
                           style={{
                              marginLeft: '.2rem',
                              width: '.22rem',
                              height: '.22rem'
                           }}
                           onClick={() => alert('点击成功')}
                     />
                  </div>
               </div>
            );
         }
   }`,
   description: `
   ## Tips：
   
   特殊图标说明：
   
       1、trigger为统一特殊动画触发属性

   `
    }, {
      title: '### 特殊图标——showHide',
      code: `
import React from 'react';
import Icon from '../../components/Icon'

   class App extends React.Component<any, any> {

         constructor(props) {
            super(props)

            this.state = {
               showHideTrigger: false
            }
         }

         // componentDidMount....
         
         render() {
            return (
               <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
                  <div className="list_item">
                     <Icon 
                        type="showHide"
                        trigger={this.state.showHideTrigger}
                        onClick={() => this.setState({
                           showHideTrigger: !this.state.showHideTrigger
                        })}
                     />
                  </div>
               </div>
            );
         }
   }`,
   description: `
   ## Tips：
   
   特殊图标showHide说明：
   
       1、trigger为统一特殊动画触发属性

   `
    }
  ],
  pramsDetail: `

  ----

  ### 参数设置
  
  | 参数 / params | 描述 / description  | 类型 / type | 默认 / default |
  | ------------- | -------------- | ---------------- | ---------------- |
  | type | 图标类型，具体可选参数在模拟器上可见 | \`string\` | 无 |
  | className | class类名，与React一致 | \`string\` | 无 |
  | state | 图标状态，可选\`spin\`(旋转) 或 \`static\` | \`string\` | static |
  | style | 样式，与React一致 | \`React.CSSProperties\` | 无 |
  | trigger | 特殊Icon触发值 | \`boolean\` | false |
  | onClick | React.MouseEvent事件，可理解为正常的React点击事件 | \`() => void\` | \`无\` |
  `
}